<template>
  <div style="width: 100%; height: 100%;">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="workFaceName" label="工作面名称" width="180"></el-table-column>
      <el-table-column prop="anchorPoint" label="坐标点" min-width="600">
        <template slot-scope="scope">
          <span>{{ scope.row.anchorPoint }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 'ON'">正在采煤</span>
          <span v-else-if="scope.row.status === 'OFF'">已结束采煤</span>
          <span v-else-if="scope.row.status === 'MINING'">矿界</span>
          <span v-else-if="scope.row.status === 'WORKING'">未作业</span>
          <span v-else-if="scope.row.status === 'STOPPED'">已停止</span>
          <span v-else-if="scope.row.status === 'PAUSED'">已暂停</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      tableData: [
        { id: 1, workFaceName: '一矿', anchorPoint: '37485446.219338,4147838.063548;37483854.203646,4147810.505412;...', status: 'ON', remark: '正在采煤' },
        { id: 2, workFaceName: '二矿', anchorPoint: '37486315.424587,4148720.817134;37486402.1801017,4149904.144657;...', status: 'ON', remark: '已结束采煤' },
        // 其他数据项...
      ]
    };
  },
  methods: {
    handleClick(row) {
      console.log('查看:', row);
    }
  }
};
</script>

<style scoped>
.el-table .cell {
  white-space: normal;
}
</style>